<template>
  <view class="captiontext" :style="Style">
    <view
      style="padding: 6px 0"
      :style="{
        'border-bottom': datas.borderBott
          ? '1px solid #F9F9F9'
          : '1px solid #fff',
      }"
    >
      <!-- 标题 -->
      <h2
        :style="{
          'font-size': datas.wordSize + 'px',
          'font-weight': datas.wordWeight,
          color: datas.wordColor,
          'text-align': datas.positions,
          height: datas.wordHeight + 'px',
          'line-height': datas.wordHeight + 'px',
          'padding-right': !(datas.positions !== 'center' && datas.more.show)
            ? '0'
            : '60px',
        }"
        v-if="datas.name"
      >
        {{ datas.name }}
      </h2>

      <!-- 描述文字 -->
      <text
        :style="{
          'font-size': datas.descriptionSize + 'px',
          'font-weight': datas.descriptionWeight,
          color: datas.descriptionColor,
          'text-align': datas.positions,
        }"
        style="margin-top: 8px"
        v-if="datas.description"
      >
        {{ datas.description }}
      </text>

      <!-- 更多 -->
      <text
        class="more"
        v-show="datas.more.show"
        :class="datas.positions !== 'center' ? 'lef' : ''"
        :style="{
          color: datas.more.type === 0 ? '#38f' : '',
          top: (datas.wordHeight - 6) / 2 + 'px',
        }"
      >
        {{ datas.more.type === 2 ? '' : datas.more.text }}
        <text> {{ datas.more.type === 0 ? '' : '>' }}</text>
      </text>
    </view>

   
  </view>
</template>

<script>
export default {
  name: 'captiontext',
  props: {
    datas: {type:Object,default:()=>{
		return {
			text: '标题文字',
			    name: '标题文字',//标题内容
			    description: '',//描述内容
			    wordSize: 16,//标题大小
			    descriptionSize: 12,//描述大小
			    wordWeight: 400,//标题粗细
			    positions: 'left', //显示位置  可选left/center
			    descriptionWeight: 200,//描述粗细
			    wordColor: 'rgba(50, 50, 51, 10)',//标题颜色
			    descriptionColor: 'rgba(150, 151, 153, 10)',//描述颜色
			    backColor: 'rgba(255, 255, 255, 10)', //背景颜色
			    borderBott: false, //底部分割线
			    wordHeight: 24,//框体高度
			    more: {    //查看更多
			      show: false,//是否显示查看更多
			      type: 1, // 样式选择
			      text: '查看更多', //自定义文字
			      httpType: 10,//链接类型
			      http: '',//链接
			    },
		}
	}},
  },
  data(){
	  return {
		  Style:{}
	  }
  },
  created() {
  	this.Style=get_style();
  },
  watch:{
    datas:{
      datas:(newVal,oldVal)=>{

      }
    }
  },
  methods:{
    get_style() {
      let obj={background: this.datas.backColor};
      if(this.datas.hasOwnProperty("Styles")) {
        Object.assign(obj,this.datas.Styles);
      }
      return this.$comm.getCss( obj);
    }
  }
}
</script>

<style scoped lang="less">
.captiontext {
  border: 2px solid #fff;
  box-sizing: border-box;
  width: 100%;
  padding: 0 14px;
  min-height: 20px;
  position: relative;

  h2,
  p {
    word-wrap: break-word;
    min-height: 10px;
  }

  /* 更多 */
  .more {
    font-size: 10px;
    color: #969799;
    text-align: center;
    &.lef {
      position: absolute;
      right: 15px;
      top: 12px;
    }
  }
}
</style>
